import React, { useEffect } from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import {
  Button,
  Checkbox,
  Form,
  Input,
  Card,
  Row,
  Col,
  Typography,
  message,
  Select,
} from "antd";
import styles from "./index.less";
import { authApi } from "@/services/api";
import { RoleEnum } from "@/constants/role";
import { useLocation } from "umi";
import { motion } from "framer-motion";

const { Title } = Typography;

export default function Page() {
  const { pathname } = useLocation();
  useEffect(() => {
    document.body.setAttribute("data-route", pathname);
    return () => document.body.removeAttribute("data-route");
  }, [pathname]);
  
  const onFinish = (values: any) => {
    authApi
      .login(values)
      .then((res) => {
        localStorage.setItem("token", res.data.token);
        message.success("登录成功");
        authApi.userInfo().then((res) => {
          localStorage.setItem("userInfo", JSON.stringify(res.data));
        });
        setTimeout(() => {
          window.location.href = "/";
        }, 500);
      })
      .catch(() => {
        message.error("用户名或密码错误");
      });
  };

  return (
    <div className={styles.container}>
      <Row justify="center" align="middle" className={styles.loginRow}>
        <Col xs={20} sm={16} md={12} lg={10} xl={8}>
          <motion.div
            initial={{ opacity: 0, y: -50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            <Card className={styles.loginCard}>
              <div className={styles.logo}>
                <Title level={2} className={styles.title}>
                  教学管理系统
                </Title>
              </div>
              <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.2, duration: 0.5 }}
              >
                <Form
                  name="normal_login"
                  className={styles.loginForm}
                  initialValues={{ remember: true, role: RoleEnum.TEACHER }}
                  onFinish={onFinish}
                >
                  <motion.div 
                    className={styles.formItem}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.3, duration: 0.3 }}
                  >
                    <Form.Item
                      name="username"
                      rules={[{ required: true, message: "请输入用户名!" }]}
                    >
                      <Input
                        prefix={<UserOutlined className="site-form-item-icon" />}
                        placeholder="用户名"
                      />
                    </Form.Item>
                  </motion.div>
                  
                  <motion.div 
                    className={styles.formItem}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.4, duration: 0.3 }}
                  >
                    <Form.Item
                      name="password"
                      rules={[{ required: true, message: "请输入密码!" }]}
                    >
                      <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                      />
                    </Form.Item>
                  </motion.div>
                  
                  <motion.div 
                    className={styles.formItem}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.5, duration: 0.3 }}
                  >
                    <Form.Item
                      name="role"
                      rules={[{ required: true, message: "请选择角色!" }]}
                    >
                      <Select
                        style={{ width: "100%" }}
                        options={[
                          { value: RoleEnum.TEACHER, label: "教师" },
                          { value: RoleEnum.ADMIN, label: "管理员" },
                        ]}
                      />
                    </Form.Item>
                  </motion.div>
                  
                  <motion.div 
                    className={styles.formItem}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.6, duration: 0.3 }}
                  >
                    <Form.Item>
                      <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住我</Checkbox>
                      </Form.Item>

                      <a className={styles.loginFormForgot} href="">
                        忘记密码
                      </a>
                    </Form.Item>
                  </motion.div>
                  
                  <motion.div 
                    className={styles.formItem}
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.7, duration: 0.3 }}
                  >
                    <Form.Item>
                      <Button
                        type="primary"
                        htmlType="submit"
                        className={styles.loginFormButton}
                        block
                      >
                        登录
                      </Button>
                      <div className={styles.registerJumper}>
                        <div>
                          或 <a href="#">立即注册!</a>
                        </div>
                      </div>
                    </Form.Item>
                  </motion.div>
                </Form>
              </motion.div>
            </Card>
          </motion.div>
        </Col>
      </Row>
    </div>
  );
}